<template>
  <div>
      <h3>文件相关的web Api: File Blob FileReader ArrayBuffer Base64 URL</h3>
      <input type="file" name="filename" id="" @change="change">
      <img src="" alt="">
  </div>
</template>

<script>
  export default {
      data(){
         return {

         }
      },
      methods:{
         change(e){
// file对象     ===================================================================================
// file对象     ===================================================================================
        // console.log(e);
          var wenjian = e.target.files[0]
          console.log(wenjian);
        //   console.log(wenjian.size, wenjian.type, wenjian.name, wenjian.lastModified);
          var blob = wenjian.slice()    //生成一个 blob对象，这个方法用于根据指定范围的字节截取文件数据
          console.log(blob);


  // filereader对象     ===========================================================================
  // filereader对象     ===========================================================================
          var filereader = new FileReader()

  //撞成 ArrayBuffer 以表示所读取文件的数据。
          // filereader.readAsArrayBuffer(wenjian)
          // filereader.onload = function (e) {
          //    console.log(e.target.result);
          //    var c = e.target.result         //ArrayBuffer对象
          //    var view  = new Int8Array(c)    //使用 Int32Array 视图读取和写入数据
          //    console.log(view);
          // }


  //转成 data:URL 格式（base64 编码）的字符串     这个是完整的编码，blob的是截断的编码  路径
          filereader.readAsDataURL(wenjian)
          filereader.onload = function (e) {
            //  console.log(e.target.result);      // 获取到了 data:URL 格式的 base64 编码 字符串
             var str = e.target.result.split(",")[1]  //截取到 base64 编码

            //  var box= document.getElementsByTagName("img")[0]
            //  box.src = e.target.result
          }


  //根据特殊的编码格式转化为内容 (字符串形式)  默认为“utf-8”类型
        //   filereader.readAsText(wenjian)
        //   filereader.onload = function (e) {
        //       console.log(e.target.result);    //乱码
        //   }


  //转成 原始二进制格式。已废弃
          // filereader.readAsBinaryString(wenjian)          //file：读取出来了它的二进制数据
          // filereader.onload = function (e) {
          //    console.log(e.target.result);
          //    var b = e.target.result
          //    var arr= [b]
          //    var o = new Blob(arr, {type: 'text/html'})   //blob：读取出来了它的内容
          //    filereader.readAsBinaryString(o)
          //    filereader.onload = function (e){
          //       console.log(e.target.result);
          //    }
          // }

         }
      },


      created(){
// Blob对象
        var blob = new Blob(["Hello World"], {type: 'text/plain'})
          console.log(blob, blob.size, blob.type);

          var promise = blob.arrayBuffer()
          console.log(promise);

          var readableStream = blob.stream()
          console.log(readableStream);
          var str = readableStream.getReader()
          console.log(str);

// base64对象
          var str = "base64Str"
          var base64Str = btoa(str)     //YmFzZTY0U3Ry  将一个 `字符串 `或 `二进制数据` 编码成一个 Base64 字符串
          console.log(base64Str);
          var str = atob(base64Str)     //解码一个 base64 的编码
          console.log(str);

// URL对象
        var url = new URL("https://www.baidu.com")
        console.log(url);
        var urlObj = URL.createObjectURL(blob)
        console.log(urlObj);
        URL.revokeObjectURL(urlObj)
      }
  }
</script>
<style lang='less' scoped>

</style>